<% title "librerías donde comprar nuestros libros en #{@ciudad}" %>

<div id="contenido" class="librerias">
  <div class="librerias">
		<div class="librerias_imagenes">
			<img alt="imagen para librerias" src="/imgs/librerias_imagen.png"/>
		</div>
    <div class="librerias_fichas">

			<h2>Librerías en <%= @ciudad %></h2>
			
			<div id="librerias_mapa" class="librerias_mapa">
			</div>
			
			<!-- google maps chargin -->
			<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%= APP_CONFIG['google_geo_api_key'] %>" type="text/javascript"></script>
			<script>
	      if( GBrowserIsCompatible() ) {
	        var map = new GMap2(document.getElementById("librerias_mapa"));
	        map.setCenter(
						new GLatLng( <%= @librerias.first.latitud %>, <%= @librerias.first.longitud %> ), 
						13
					);
					
					map.addControl(new GSmallZoomControl());
        
          <% @librerias.each do |libreria| %>
  				  var point = 
  						new GLatLng(
  							<%= libreria.latitud %>,
  							<%= libreria.longitud %>
  						);
							
  	        map.addOverlay(new GMarker(point));
	        <% end %>
	        
	        
	      } else {
					alert( "hay algún problema con google maps, igual tu navegador no es compatible o la KEY de google maps indicada no es la correcta.");
				}
			</script>
			
			<% @librerias.each do |libreria| %>
			<div class="librerias_ficha">
				<h3><%= link_to libreria.titulo, librerias_ficha_url( libreria.titulo_sanitizado ) %></h3>
        <div class="libreria_direccion"><%= libreria.direccion_google %></div>
			</div>
      <% end %>
        	
    </div>
	</div>
</div>


